<!DOCTYPE html>
<html lang="en" xmlns:c="">
<head>
    <meta charset="UTF-8">
    <title>项配置(标题、默认值、描述、配置的值)</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<body>

<div id="app">
    <div>
        <button @click="addConfig">添加配置</button>
    </div>
    <div v-if="showAdd">
        <table>

            <tr>

                <td>
                    标题:<input ref="title" v-model.trim="curConfig.title" type="text"
                              :readonly="isReadonly?'readonly':false">
                    <span>{{error.title}}</span>
                </td>
            </tr>
            '
            <tr>

                <td>
                    配置项的值:<input ref="value" v-model.trim="curConfig.value"  type="text">
                    <span>{{error.value}}</span>
                </td>
            </tr>
            <tr>

                <td>
                    默认值:<input ref="defaultValue" v-model.trim="curConfig.defaultValue" type="text">
                    <span>{{error.defaultValue}}</span>
                </td>
            </tr>
            <tr>

                <td>
                    描述:<textarea ref="description" v-model.trim="curConfig.description"
                                 style="height: 150px;width: 200px" rows=”25” cols=”75”></textarea>
                    <span>{{error.description}}</span>
                </td>
            </tr>

            <tr>
                <td>
                    <input value="提交" @click="save" type="button">
                    <input @click="backTab" value="返回" type="button">
                </td>
            </tr>

        </table>
    </div>

    <table border="1px" v-if="showTab">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>配置的值</td>
            <td>默认值</td>
            <td>描述</td>
            <td>操作</td>
        </tr>
        <tr v-for="config,index in configs">
            <td>{{index+1}}</td>
            <td>{{config.title}}</td>
            <td>{{config.value}}</td>
            <td>{{config.defaultValue}}</td>
            <td>{{config.description}}</td>
            <td><input @click="update(index)" type="button" value="修改"><input @click="del(index)" type="button" value="删除"><input @click="defaultValue(index)" type="button" :disabled="isdisabled[index]?'disabled':false" value="设为默认值"></td>
        </tr>
    </table>
    <div class="list-page"> {{pageInfo.total}} 条
        <a v-for="i in pageInfo.pages" @click.prevent="initData(i)"
           :class="{'current':pageInfo.pageNum==i}"
        >{{i}}</a>
        {{pageInfo.pageNum}}/{{pageInfo.pages}} 页
    </div>

</div>

</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            //存放后端的数据
            configs: [],
            //显示所有数据表格
            showTab: true,
            //是否显示添加或者修改输入框
            showAdd: false,
            //存放新增加的数据
            curConfig: {},
            //修改的索引号
            editIndex: -1,
            //项配置表的数据(初始值)
            searchConfig: {
                id: 0,
                title: '',
                value: '',
                defaultValue: '',
                description: ''
            },
            //判断标题是否默认选中
            isReadonly: false,
            //判断默认值是否默认选中
            isdisabled: [],
            error: {
                title: "",
                value: "",
                defaultValue: "",
                description: ""
            }
        },
        //created 创建
        created: function () {
            //initData  初始化数据
            this.initData(1);
        },
        //methods 方法
        methods: {
            //查询所有的配置的方法
            initData: function (pageNum) {
                this.showTab = true;//显示所有数据表格
                this.showAdd = false;//是否显示添加或者修改输入框
                axios.post("http://localhost:8080/manage/findConfig?pageNum="+pageNum,this.searchConfig)
                    .then(res => {
                        //res.data.data   res.第一个data代表的是从后台返回的一个整体数据;第二个data代表的是从后台返回的那个整体数据里的一个数据
                        this.configs = res.data.data.list;
                        this.pageInfo=res.data.data;
                        //设为默认值判断开始
                        for (var i = 0; i < this.configs.length; i++) {
                            var config = this.configs[i];
                            if (config.value == config.defaultValue) {
                                this.isdisabled[i] = true;
                            } else {
                                this.isdisabled[i] = false;
                            }
                        }//设为默认值判断结束
                    })//请求成功
            },
            //提交保存功能的输入框的确定按钮(添加或者修改)的方法
            save: function () {
                //修改功能
                if (this.curConfig.id) {
                    //获得当前编辑对象
                    var curConfig = JSON.parse(JSON.stringify(this.curConfig));
                    //splice对数组从某个索引位置的开始;this表示该方法所属的对象
                    this.configs.splice(this.editIndex, 1, curConfig);

                } else {
                    //push就是将新数据放入到一个新的list集合里面
                    this.configs.push(JSON.parse(JSON.stringify(this.curConfig)));
                }
                //清空当前编辑对象;{}代表对象
                this.curConfig = {};
                //不显示问题类型输入框  添加或者修改
                this.showAdd = false;
                //修改的索引号,editIndex=-1表示取消编辑状态
                this.editIndex = -1;
            },
            //添加类型功能
            addConfig: function () {
                //是否显示添加或者修改输入框
                this.showAdd = true;
                //显示所有数据表格
                this.showTab = false;
                //标题不默认选中
                this.isReadonly = false;
            },
            //点击修改功能
            update: function (index) {
                //修改索引号
                this.editIndex = index;
                //标题默认选中为true
                this.isReadonly = true;
                //显示问题类型的输入框为true
                this.showAdd = true;
                //不显示所有数据表格
                this.showTab = false;
                //修改当前编辑对象,修改时标题内容不会改变
                this.curConfig = JSON.parse(JSON.stringify(this.configs[index]));
            },
            //返回类型功能
            backTab: function () {
                this.showAdd = false;
                this.showTab = true;
                this.curConfig = {};
            },
            //删除类型功能
            del: function (index) {
                axios.post("http://localhost:8080/manage/deleteConfig/" + this.configs[index].id)
                    .then(
                        res => {
                            this.configs.splice(index, 1);
                        });
            },
            //设为默认值功能
            defaultValue: function (index) {
                axios.get("http://localhost:8080/manage/" + this.configs[index].id)
                    .then(
                        res => {

                            this.configs.splice(index, 1);
                            this.isdisabled[index] = true;
                        });
            },
            //提交保存
            save: function () {
                //0~100位汉字或者数字或者()或者[]
                var te = /^[\u4E00-\u9FA5\(\)\b0-9\(\)\[\]]{0,100}$/;
                //0~120分钟
                var oneValue = /^([0-9]|[1-9]\d|1[01]\d|120)$/;
                //0~30分钟
                var twoValue = /^([0-9])$|([1-3][0-0])$/;
                //0~5分钟
                var threeValue = /^[0-5]$/;
                //30~120分钟
                var fourValue = /^([3-9][0-9])$|([0-1][0-2][0-0])$/;
                //1~2小时
                var fiveValue = /^[1-2]$/;
                /*var tes = /^[\u4E00-\u9FA5\(\)]{2,50}$/;//判断2~50为汉字*/
                //判断2~50为汉字或者大写字母或者小写字母或者()
                var tes = /^[\u4E00-\u9FA5\(\)\[\]\{\}\ba-zA-Z0-9]{2,50}$/;
                //修改功能格式判断
                if (this.curConfig.id) {
                    //修改功能id为1的格式判断
                    if (this.curConfig.id == 1) {
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!oneValue.test(this.curConfig.value)) {
                            this.error.value = "时间范围不得超过0~120分钟";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!oneValue.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "时间范围不得超过0~120分钟";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }


                    }
                    //修改功能id为2的格式判断
                    else if (this.curConfig.id == 2) {
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!twoValue.test(this.curConfig.value)) {
                            this.error.value = "时间范围不得超过0~30分钟";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!twoValue.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "时间范围不得超过0~30分钟";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }
                    }
                    //修改功能id为3的格式判断
                    else if (this.curConfig.id == 3) {
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!threeValue.test(this.curConfig.value)) {
                            this.error.value = "时间范围不得超过0~5分钟";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!threeValue.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "时间范围不得超过0~5分钟";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }

                    }
                    //修改功能id为4的格式判断
                    else if (this.curConfig.id == 4) {
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!fourValue.test(this.curConfig.value)) {
                            this.error.value = "时间范围在30~120分钟之内";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!fourValue.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "时间范围在30~120分钟之内";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }
                    }
                    //修改功能id为5的格式判断
                    else if (this.curConfig.id == 5) {
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!fiveValue.test(this.curConfig.value)) {
                            this.error.value = "时间范围在1~2小时之内";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!fiveValue.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "时间范围在1~2小时之内";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }
                    }
                    else//修改功能id不是1-5的格式判断
                    {
                        //标题格式验证
                        if (this.curConfig.title == undefined || this.curConfig.title == "") {
                            this.error.title = "标题不能为空";
                            //标题输入框获得焦点
                            this.$refs.title.focus();
                            return;
                        } else if (!tes.test(this.curConfig.title)) {
                            this.error.title = "请输入2~50位汉字或者其他字符";
                            //标题输入框获得焦点
                            this.$refs.title.focus();
                            return;
                        } else {
                            this.error.title = "";
                        }
                        //配置项的值格式判断
                        if (this.curConfig.value == undefined || this.curConfig.value == "") {
                            this.error.value = "配置项的值不能为空";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else if (!te.test(this.curConfig.value)) {
                            this.error.value = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.value.focus();
                            return;
                        } else {
                            this.error.value = "";
                        }
                        //默认值格式判断
                        if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                            this.error.defaultValue = "默认值不能为空";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else if (!te.test(this.curConfig.defaultValue)) {
                            this.error.defaultValue = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.defaultValue.focus();
                            return;
                        } else {
                            this.error.defaultValue = "";
                        }
                        //描述的格式判断
                        if (this.curConfig.description == undefined || this.curConfig.description == "") {
                            this.error.description = "描述内容不能为空";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else if (!te.test(this.curConfig.description)) {
                            this.error.description = "请输入0~100位汉字或者数字";
                            //排序输入框获得焦点
                            this.$refs.description.select();
                            return;
                        } else {
                            this.error.description = "";
                        }
                    }

                    //保存修改功能的数据
                    axios.post("http://localhost:8080/manage/upadateConfig", this.curConfig)
                        .then(res => {
                            this.backTab();
                            //保存修改的新内容
                            if (!this.curConfig.id) {
                                this.initData();
                            }
                            this.curConfig = {};

                        });//请求成功
                }
                else//添加功能的格式判断
                {
                    //标题格式验证
                    if (this.curConfig.title == undefined || this.curConfig.title == "") {
                        this.error.title = "标题不能为空";
                        //标题输入框获得焦点
                        this.$refs.title.focus();
                        return;
                    } else if (!tes.test(this.curConfig.title)) {
                        this.error.title = "请输入2~50位汉字或者其他字符";
                        //标题输入框获得焦点
                        this.$refs.title.focus();
                        return;
                    } else {
                        this.error.title = "";
                    }
                    //配置项的值格式判断
                    if (this.curConfig.value == undefined || this.curConfig.value == "") {
                        this.error.value = "配置项的值不能为空";
                        //排序输入框获得焦点
                        this.$refs.value.focus();
                        return;
                    } else if (!te.test(this.curConfig.value)) {
                        this.error.value = "请输入0~100位汉字或者数字";
                        //排序输入框获得焦点
                        this.$refs.value.focus();
                        return;
                    } else {
                        this.error.value = "";
                    }
                    //默认值格式判断
                    if (this.curConfig.defaultValue == undefined || this.curConfig.defaultValue == "") {
                        this.error.defaultValue = "默认值不能为空";
                        //排序输入框获得焦点
                        this.$refs.defaultValue.focus();
                        return;
                    } else if (!te.test(this.curConfig.defaultValue)) {
                        this.error.defaultValue = "请输入0~100位汉字或者数字";
                        //排序输入框获得焦点
                        this.$refs.defaultValue.focus();
                        return;
                    } else {
                        this.error.defaultValue = "";
                    }
                    //描述的格式判断
                    if (this.curConfig.description == undefined || this.curConfig.description == "") {
                        this.error.description = "描述内容不能为空";
                        //排序输入框获得焦点
                        this.$refs.description.select();
                        return;
                    } else if (!te.test(this.curConfig.description)) {
                        this.error.description = "请输入0~100位汉字或者数字";
                        //排序输入框获得焦点
                        this.$refs.description.select();
                        return;
                    } else {
                        this.error.description = "";
                    }
                    //保存添加功能的数据
                    axios.post("http://localhost:8080/manage/addConfig", this.curConfig)
                        .then(res => {
                            this.backTab();
                            //保存添加的新内容
                            if (!this.curConfig.id) {
                                this.initData();
                            }
                            this.curConfig = {};

                        });//请求成功
                }
            }
        }
    });
</script>


























